<template>
    <user-dialog class="userForm" :title="props.title" :show="props.show" @close="close" @submit="submit">
        <el-form :model="userData" :rules="rules" ref="userForm" label-width="100">
            <el-form-item label="用户名" prop="userName">
                <el-input :disabled="flag" v-model="userData.userName" placeholder="请输入用户名称"></el-input>
            </el-form-item>
            <el-form-item label="用户邮箱" prop="userEmail">
                <el-input :disabled="flag" v-model="userData.userEmail" placeholder="请输入用户邮箱"></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="mobile">
                <el-input v-model="userData.mobile" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
                <el-radio-group v-model="userData.sex">
                    <el-radio :label="0" size="large">{{SEX[0]}}</el-radio>
                    <el-radio :label="1" size="large">{{SEX[1]}}</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="岗位" prop="job">
                <el-input v-model="userData.job" placeholder="请输入岗位"></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="state">
                <el-select v-model="userData.state">
                    <el-option :value="1" :label="STATE[1]"></el-option>
                    <el-option :value="2" :label="STATE[2]"></el-option>
                    <el-option :value="3" :label="STATE[3]"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="系统角色" prop="roleList">
                <el-select v-model="userData.roleList" placeholder="请选择用户系统角色" multiple style="width:100%;">
                    <el-option v-for="role in list.roleList" :key="role.id" :value="role.id" :label="role.roleName">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="部门" prop="deptId">
                <el-cascader v-model="userData.deptId" placeholder="请选择所属部门" :options="list.deptList"
                    style="width:100%;" :props="{ checkStrictly:true,value:'_id',label:'deptName' }" clearable>
                </el-cascader>
            </el-form-item>
        </el-form>
    </user-dialog>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted, watch, nextTick, computed } from 'vue'
import userDialog from "@/components/Dialog.vue"
import type { FormInstance, FormRules } from "element-plus"
import { STATE, SEX } from "@/utils/enum"
import { UserForm } from "@/interface/user"
import { checkEmail, checkMobile } from "@/utils/rules"
import { roleAllList } from "@/api/role.js"
import { deptList } from "@/api/dept"


const props = defineProps({
    show: {
        type: Boolean,
        default: true,
        required: true
    },
    title: {
        type: String,
        required: true
    },
    userFormData: Object,
    type: String
})
let userData = ref<UserForm>({
    userName: "",
    userEmail: "",
    mobile: "",
    sex: 0,
    job: "",
    state: 3,
    roleList: [],
    deptId: []
})

const flag = computed(() => props.type === 'edit' ? true : false)

// 监听是新增还是编辑
watch(() => props.type, (newValue, oldValue) => {
    let action = newValue ? newValue : 'add'
    if (action === 'edit') {
        nextTick(() => {
            userData.value = props.userFormData as UserForm
        })
    }
}, { immediate: true })

const userForm = ref<FormInstance>()
const rules = reactive<FormRules>({
    userName: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
    userEmail: [
        { required: true, message: '请输入用户邮箱', trigger: 'blur' },
        { validator: checkEmail, trigger: 'blur' }
    ],
    mobile: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { validator: checkMobile, trigger: 'blur' }
    ],
    deptIds: [{ required: true, message: '请选择所属部门', trigger: 'blur' }],
})

const list = reactive({
    roleList: [],
    deptList: []
})
const getDept = async () => {
    const res = await deptList()
    list.deptList = res
    console.log('部门列表', list.deptList)
}
// 获取角色列表
const getRoleList = async () => {
    const res = await roleAllList()
    list.roleList = res
}
onMounted(() => {
    getDept()
    getRoleList()
})

const emits = defineEmits(["close", "submit"])
const close = () => {
    userForm.value?.resetFields()
    emits("close")
}
const submit = () => {
    userForm.value?.validate((valid: boolean) => {
        if (valid) {
            emits("submit", userData.value)
            setTimeout(() => {
                close()
            }, 0)
        }
    })
}
</script>
<style lang='scss' scoped>
.el-dialog__header {
    border-bottom: 1px solid red;
}
</style>